<template>
	<div class="all">
		<div class="flex flexb" style="padding:0 0.5rem 0.2rem;">

			<div :class="type == 0 ? 'act type':'type'" @click="typechange(0)">上传</div>
			<div :class="type == 2 ? 'act type':'type'" @click="typechange(2)">收藏</div>
			<div :class="type == 1 ? 'act type':'type'" @click="typechange(1)">点赞</div>
			<div :class="type == 3 ? 'act type':'type'" @click="typechange(3)">打赏</div>
		</div>
		<div class="list">
			<div class="flex" style="background: #ddd; padding: 0.05rem;" v-if="type == 2">
				<div :class="tag == 2 ? 'act2 type2':'type2'" @click="tagchange(2)">我收藏的</div>
				<div :class="tag == 1 ? 'act2 type2':'type2'" @click="tagchange(1)">收藏我的</div>
			</div>
			<div class="flex" style="background: #ddd; padding: 0.05rem;" v-if="type == 1">
				<div :class="tag == 2 ? 'act2 type2':'type2'" @click="tagchange(2)">我点赞的</div>
				<div :class="tag == 1 ? 'act2 type2':'type2'" @click="tagchange(1)">点赞我的</div>
			</div>
			<div class="flex" style="background: #ddd; padding: 0.05rem;" v-if="type == 3">
				<div :class="tag == 2 ? 'act2 type2':'type2'" @click="tagchange(2)">我打赏的</div>
				<div :class="tag == 1 ? 'act2 type2':'type2'" @click="tagchange(1)">打赏我的</div>
			</div>
			
			<div class="li" v-for="item in list" :key="item.id" @click="godetail(item.id,item)">
				<div><img :src="item.image"
						style="width: 1.8rem; height: 1.8rem; margin-right: 0.2rem; display: block;"></div>
				<div>
					<div style="line-height: 0.5rem; font-size: 0.32rem; color: #2D3038;">{{item.name}}</div>
					<div style="line-height: 0.5rem; font-size: 0.28rem; color:#868B98;">{{item.game_start}}</div>
					<div style="line-height: 0.5rem; font-size: 0.28rem; color:#868B98; margin-top: 0.3rem;">共{{item.count}}张图</div>
				</div>
			</div>
			
		</div>

	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'login',
		data() {
			return {
				type: 0,
				tag:"",
				list:"",
			}
		},

		created() {
			this.getlist()
		},

		methods: {
			godetail:function(id,item){
				console.log(id)
				this.$router.push({
					path:'/zhaopiandetail',
					query:{
						id:id,
						type:this.tag,
						tag:this.type,
						item:JSON.stringify(item)
					}
				})
			},
			typechange:function(id){
				if(id == 0){
					this.tag = ""
				}else{
					this.tag = 1
				}
				this.type = id
				this.getlist()
			},
			tagchange:function(id){
				this.tag = id
				this.getlist()
			},
			getlist:function() {
				axios.get(this.urls+'/photographer/my_photos_games?page=1&page_size=1000&tag='+this.type+'&type='+this.tag).then((response) => {
					if (response.data.msg.code == 0) {
						this.list = response.data.data.data
					}else{
						this.$toast(response.data.msg.info);
					}
				})
			},
		},
		mounted() {
			this.data = this.originData;
		}

	}
</script>


<style scoped lang="less">
	.all {
		.li {
			background: #FFFFFF;
			padding: 0.3rem;
			display: flex;
			margin-top: 0.2rem; box-shadow: 2px 2px 5px #ccc;
		}

		.type {
			text-align: center;
			border-bottom: 2px #eaeaea solid;
			padding-bottom: 0.1rem;
			font-size: 0.28rem;
		}

		.act {
			border-bottom: 2px #FF713B solid !important;
		}
		
		.type2{
			flex: 1; text-align: center; line-height: 0.6rem; font-size: 0.25rem;
		}
		.act2 {
			background: #FFFFFF;
		}
	}

	.container-water-fall {
		// padding: 0 28px;
		width: 100vw;
		box-sizing: border-box;

		.cell-item {
			width: 100%;
			// margin-bottom: 18px;
			background: #ffffff;
			border: 2px solid #F0F0F0;
			border-radius: 12px 12px 12px 12px;
			overflow: hidden;
			box-sizing: border-box;

			img {
				// border-radius: 12px 12px 0 0;
				width: 100%;
				height: auto;
				display: block;
			}
		}
	}
</style>
